
// 全局指令
export default  (app:any) => {
    // 图片懒加载指令
    app.directive('lazyload', {
        mounted(el: any, binding: any) { // vue2.0 inserted vue3.0 mounted
            const observer = new IntersectionObserver(([{isIntersecting}]) => {
                if (isIntersecting) { // isIntersecting判断是否进入视图
                    observer.unobserve(el) // 进入视图后，停止监听
                    el.onerror = () => { // 加载失败显示默认图片
                        el.src = '@/assets/loading.gif'
                    }
                    el.src = binding.value // 进入视图后，把指令绑定的值赋值给src属性，显示图片
                }
            }, {
                threshold: 0.01 // 当图片img元素占比视图0.01时 el.src = binding.value
            })
            observer.observe(el) //观察指令绑定的dom
        }
    })
}
